<template>
  <div>
    <div class="layout-box">
      <!-- 标题 -->
      <div class="layout-box-header">
        <i class="icon-layout-box-title" />element树
      </div>
      <!-- 内容 -->
      <div class="layout-box-content">
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        />
      </div>
    </div>
    <div class="layout-box">
      <!-- 标题 -->
      <div class="layout-box-header">
        <i class="icon-layout-box-title" />element下拉选择器(单选)
      </div>
      <!-- 内容 -->
      <div class="layout-box-content">
        <div class="width500">
          <my-select v-model="compType" clearable :dict-type="'MsgType'">
            <el-option label="全部" value="" />
          </my-select>
        </div>

        <div v-if="compType">{{ compType }}</div>
      </div>
    </div>
    <div class="layout-box">
      <!-- 标题 -->
      <div class="layout-box-header">
        <i class="icon-layout-box-title" />treeselect下拉选择器(可多选，可单选)
      </div>
      <!-- 内容 -->
      <div class="layout-box-content">
        <treeselect
          v-model="columnId"
          style="width: 500px; line-height: 15px"
          :options="children"
          :normalizer="normalizer"
          placeholder="选择内容"
          multiple
          :disable-branch-nodes="true"
          value-format="object"
          clear-all-text=""
          open-direction="bottom"
        />
        <span v-if="columnId.length > 0">{{ columnId }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: {
    Treeselect
  },
  data() {
    return {
      data: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1'
            },
            {
              id: 6,
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1'
            },
            {
              id: 8,
              label: '二级 3-2'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },

      columnId: [],

      children: [
        {
          deptName: '办公厅',
          columnScore: '2',
          children: [
            {
              deptName: '办公厅',
              columnScore: '2',
              children: [],
              columnId: 'c9517c7751a445c88a0060c9d1922fcb',
              sortOrder: 1,
              pageSize: 0,
              zwSign: '1',
              pageNum: 0,
              parentId: '65daa5fdc70c4051b2464721d6b25004',
              deptCode: '071001',
              columnName: '简报',
              status: 1
            },
            {
              deptName: '办公厅',
              columnId: 'dc7fd4c1b8544bfebdd7a7feb20e7557',
              pageSize: 0,
              pageNum: 0,
              parentId: '65daa5fdc70c4051b2464721d6b25004',
              columnNameAlias: '专报',
              columnScore: '2',
              children: [],
              sortOrder: 2,
              zwSign: '1',
              deptCode: '071001',
              columnName: '要情专报',
              status: 1
            },
            {
              deptName: '办公厅',
              columnId: '9c49cdc55c684b50a8189bbd2b24e8c5',
              pageSize: 0,
              pageNum: 0,
              parentId: '65daa5fdc70c4051b2464721d6b25004',
              columnNameAlias: '其他',
              columnScore: '2',
              children: [],
              sortOrder: 3,
              zwSign: '1',
              deptCode: '071001',
              columnName: '其他刊物',
              status: 1
            }
          ],
          columnId: '65daa5fdc70c4051b2464721d6b25004',
          sortOrder: 1,
          pageSize: 0,
          zwSign: '1',
          pageNum: 0,
          parentId: '60b54e06b0384bc6956dcfbc8f13a8a9',
          deptCode: '071001',
          columnName: '信息刊物',
          status: 1
        },
        {
          deptName: '办公厅',
          columnScore: '2',
          children: [
            {
              deptName: '办公厅',
              columnScore: '2',
              children: [],
              columnId: '6ea5bda7720b4436a94f2be690783c8d',
              sortOrder: 1,
              pageSize: 0,
              zwSign: '1',
              pageNum: 0,
              parentId: '0502d746898d4673919985ab7885d4fb',
              deptCode: '071001',
              columnName: '重要讲话',
              status: 1
            },
            {
              deptName: '办公厅',
              columnScore: '2',
              children: [],
              columnId: '6cf80cc4c7844b46a2dd339b6c42fb7f',
              sortOrder: 2,
              pageSize: 0,
              zwSign: '1',
              pageNum: 0,
              parentId: '0502d746898d4673919985ab7885d4fb',
              deptCode: '071001',
              columnName: '领导活动',
              status: 1
            },
            {
              deptName: '办公厅',
              columnScore: '2',
              children: [],
              columnId: '914bca52191344ad83113242ab0d0197',
              sortOrder: 3,
              pageSize: 0,
              zwSign: '1',
              pageNum: 0,
              parentId: '0502d746898d4673919985ab7885d4fb',
              deptCode: '071001',
              columnName: '其他',
              status: 1
            }
          ],
          columnId: '0502d746898d4673919985ab7885d4fb',
          sortOrder: 1,
          pageSize: 0,
          zwSign: '1',
          pageNum: 0,
          parentId: '60b54e06b0384bc6956dcfbc8f13a8a9',
          deptCode: '071001',
          columnName: '要闻发布',
          status: 1
        },
        {
          deptName: '办公厅',
          columnScore: '4',
          children: [
            {
              deptName: '办公厅',
              columnScore: '4',
              children: [],
              columnId: 'b65d5eebe3aa448d986ea75da4df26cb',
              sortOrder: 1,
              pageSize: 0,
              zwSign: '1',
              pageNum: 0,
              parentId: '12a3b7b029e846108e0a24722438587a',
              deptCode: '071001',
              columnName: '业务',
              status: 1
            },
            {
              deptName: '办公厅',
              columnScore: '4',
              children: [],
              columnId: '67534081042d4f27ae895adbc92f4259',
              sortOrder: 2,
              pageSize: 0,
              zwSign: '1',
              pageNum: 0,
              parentId: '12a3b7b029e846108e0a24722438587a',
              deptCode: '071001',
              columnName: '队伍',
              status: 1
            },
            {
              deptName: '办公厅',
              columnScore: '4',
              children: [],
              columnId: 'a6264f921e21444187b503710576d428',
              sortOrder: 3,
              pageSize: 0,
              zwSign: '1',
              pageNum: 0,
              parentId: '12a3b7b029e846108e0a24722438587a',
              deptCode: '071001',
              columnName: '法制',
              status: 1
            },
            {
              deptName: '办公厅',
              columnScore: '4',
              children: [],
              columnId: 'adf2381db05b450eb3ee37a275f382f4',
              sortOrder: 4,
              pageSize: 0,
              zwSign: '1',
              pageNum: 0,
              parentId: '12a3b7b029e846108e0a24722438587a',
              deptCode: '071001',
              columnName: '其他',
              status: 1
            }
          ],
          columnId: '12a3b7b029e846108e0a24722438587a',
          sortOrder: 3,
          pageSize: 0,
          zwSign: '1',
          pageNum: 0,
          parentId: '60b54e06b0384bc6956dcfbc8f13a8a9',
          deptCode: '071001',
          columnName: '经验交流',
          status: 1
        },
        {
          deptName: '办公厅',
          columnScore: '2',
          children: [
            {
              deptName: '办公厅',
              columnScore: '2',
              children: [],
              columnId: '6c5604349fe24e589d7729aa6ee1c44e',
              sortOrder: 1,
              pageSize: 0,
              zwSign: '1',
              pageNum: 0,
              parentId: 'f864aa02021d482c9f7aa728c227e623',
              deptCode: '071001',
              columnName: '监管执法',
              status: 1
            },
            {
              deptName: '办公厅',
              columnScore: '2',
              children: [],
              columnId: '745b35267c1b457faedf4a67feba701d',
              sortOrder: 3,
              pageSize: 0,
              zwSign: '1',
              pageNum: 0,
              parentId: 'f864aa02021d482c9f7aa728c227e623',
              deptCode: '071001',
              columnName: '服务发展',
              status: 1
            },
            {
              deptName: '办公厅',
              columnScore: '80',
              children: [],
              columnId: '407536ef743c42a1b8833e33e1b58b45',
              sortOrder: 4,
              pageSize: 0,
              zwSign: '1',
              pageNum: 0,
              parentId: 'f864aa02021d482c9f7aa728c227e623',
              deptCode: '071001',
              columnName: '基层基础',
              status: 1
            },
            {
              columnScore: '90',
              children: [],
              columnId: '3abd0443e9214518ae13a8d6b790e825',
              sortOrder: 6,
              pageSize: 0,
              zwSign: '1',
              pageNum: 0,
              parentId: 'f864aa02021d482c9f7aa728c227e623',
              columnName: '问题建议',
              status: 1
            },
            {
              deptName: '办公厅',
              columnId: 'b056eedf5192473ea54c9d9c0c8abd08',
              pageSize: 0,
              pageNum: 0,
              parentId: 'f864aa02021d482c9f7aa728c227e623',
              columnNameAlias: '新增测试',
              columnScore: '2',
              children: [],
              sortOrder: 7,
              zwSign: '1',
              deptCode: '071001',
              columnName: '探索创新',
              status: 1
            },
            {
              deptName: '办公厅',
              columnScore: '2',
              children: [],
              columnId: '93a6ed9b1aac447c8b527019e6044d98',
              sortOrder: 8,
              pageSize: 0,
              zwSign: '1',
              pageNum: 0,
              parentId: 'f864aa02021d482c9f7aa728c227e623',
              deptCode: '071001',
              columnName: '其他',
              status: 1
            }
          ],
          columnId: 'f864aa02021d482c9f7aa728c227e623',
          sortOrder: 4,
          pageSize: 0,
          zwSign: '1',
          pageNum: 0,
          parentId: '60b54e06b0384bc6956dcfbc8f13a8a9',
          deptCode: '071001',
          columnName: '工作动态',
          status: 1
        },
        {
          deptName: '办公厅',
          columnScore: '0',
          children: [
            {
              deptName: '办公厅',
              columnScore: '5',
              children: [],
              columnId: '50eb942b8ff24c5aa8710d68c552c932',
              sortOrder: 1,
              pageSize: 0,
              zwSign: '1',
              pageNum: 0,
              parentId: '9862cc989ec74b0087bf07f3b8049e4b',
              deptCode: '071001',
              columnName: '各地调研',
              status: 1
            },
            {
              deptName: '办公厅',
              columnScore: '10',
              children: [],
              columnId: '9c511a2cb7b64ecbb1a5ba09412bb7d8',
              sortOrder: 2,
              pageSize: 0,
              zwSign: '1',
              pageNum: 0,
              parentId: '9862cc989ec74b0087bf07f3b8049e4b',
              deptCode: '071001',
              columnName: '调研精选',
              status: 1
            }
          ],
          columnId: '9862cc989ec74b0087bf07f3b8049e4b',
          sortOrder: 4,
          pageSize: 0,
          zwSign: '1',
          pageNum: 0,
          parentId: '60b54e06b0384bc6956dcfbc8f13a8a9',
          deptCode: '071001',
          columnName: '信息调研',
          status: 1
        },
        {
          deptName: '办公厅',
          columnScore: '2',
          children: [
            {
              deptName: '办公厅',
              columnId: '3ab46ab8a77a4ac2af77798d69994c70',
              pageSize: 0,
              pageNum: 0,
              parentId: 'db63a82f9c23410d9b1bfcbb35173d87',
              columnNameAlias: '会议精神',
              columnScore: '2',
              children: [],
              sortOrder: 1,
              zwSign: '1',
              deptCode: '071001',
              columnName: '贯彻系统工作会议精神情况',
              status: 1
            },
            {
              deptName: '办公厅',
              columnId: '835e70faa3de4300b87e6199fa5861eb',
              pageSize: 0,
              pageNum: 0,
              parentId: 'db63a82f9c23410d9b1bfcbb35173d87',
              columnNameAlias: '领导批示',
              columnScore: '2',
              children: [],
              sortOrder: 2,
              zwSign: '1',
              deptCode: '071001',
              columnName: '省级领导批示专题',
              status: 1
            },
            {
              deptName: '办公厅',
              columnId: '9237536ada154811a83e1087b4430e7a',
              pageSize: 0,
              pageNum: 0,
              parentId: 'db63a82f9c23410d9b1bfcbb35173d87',
              columnNameAlias: '市场整顿',
              columnScore: '2',
              children: [],
              sortOrder: 3,
              zwSign: '1',
              deptCode: '071001',
              columnName: '节日市场整顿',
              status: 1
            },
            {
              deptName: '办公厅',
              columnId: '74cad99f0ed1463aa692e92f28959d4d',
              pageSize: 0,
              pageNum: 0,
              parentId: 'db63a82f9c23410d9b1bfcbb35173d87',
              columnNameAlias: '应急管理',
              columnScore: '2',
              children: [],
              sortOrder: 4,
              zwSign: '1',
              deptCode: '071001',
              columnName: '应急管理',
              status: 1
            }
          ],
          columnId: 'db63a82f9c23410d9b1bfcbb35173d87',
          sortOrder: 5,
          pageSize: 0,
          zwSign: '1',
          pageNum: 0,
          parentId: '60b54e06b0384bc6956dcfbc8f13a8a9',
          deptCode: '071001',
          columnName: '专题追踪',
          status: 1
        },
        {
          deptName: '办公厅',
          columnScore: '0',
          children: [
            {
              deptName: '办公厅',
              columnId: '24ffdbc6620245009261e604655b3416',
              pageSize: 0,
              pageNum: 0,
              parentId: 'f12daa8086cf4e3db605ecb539237ec6',
              columnNameAlias: '通知',
              columnScore: '2',
              children: [],
              sortOrder: 1,
              zwSign: '1',
              deptCode: '071001',
              columnName: '重要通知',
              status: 1
            },
            {
              deptName: '办公厅',
              columnId: 'd32dd283a3b64a2ab4ccd4ba30ee9159',
              pageSize: 0,
              pageNum: 0,
              parentId: 'f12daa8086cf4e3db605ecb539237ec6',
              columnNameAlias: '交流',
              columnScore: '2',
              children: [],
              sortOrder: 2,
              zwSign: '1',
              deptCode: '071001',
              columnName: '信息交流',
              status: 1
            },
            {
              deptName: '办公厅',
              columnId: 'ad80b7a63de7461fa74fabf820c22655',
              pageSize: 0,
              pageNum: 0,
              parentId: 'f12daa8086cf4e3db605ecb539237ec6',
              columnNameAlias: '要点',
              columnScore: '2',
              children: [],
              sortOrder: 3,
              zwSign: '1',
              deptCode: '071001',
              columnName: '要点发布',
              status: 1
            },
            {
              deptName: '办公厅',
              columnId: '34bf308d64f048f98b6e31fdfd3cab78',
              pageSize: 0,
              pageNum: 0,
              parentId: 'f12daa8086cf4e3db605ecb539237ec6',
              columnNameAlias: '通报',
              columnScore: '2',
              children: [],
              sortOrder: 4,
              zwSign: '1',
              deptCode: '071001',
              columnName: '采用通报',
              status: 1
            },
            {
              deptName: '办公厅',
              columnScore: '2',
              children: [],
              columnId: '5b1f457979bd48ce9b2ec4174b5a7e71',
              sortOrder: 5,
              pageSize: 0,
              zwSign: '1',
              pageNum: 0,
              parentId: 'f12daa8086cf4e3db605ecb539237ec6',
              deptCode: '071001',
              columnName: '信息制度',
              status: 1
            }
          ],
          columnId: 'f12daa8086cf4e3db605ecb539237ec6',
          sortOrder: 6,
          pageSize: 0,
          zwSign: '1',
          pageNum: 0,
          parentId: '60b54e06b0384bc6956dcfbc8f13a8a9',
          deptCode: '071001',
          columnName: '信息工作',
          status: 1
        },
        {
          deptName: '办公厅',
          columnScore: '0',
          children: [
            {
              deptName: '办公厅',
              columnId: '16597ea2c52d43b89f40f5f436a0a3c0',
              pageSize: 0,
              pageNum: 0,
              parentId: 'dfdb576402fb4d3ba94d3f9a567f6b9f',
              columnNameAlias: '',
              columnScore: '2',
              children: [],
              sortOrder: 1,
              zwSign: '1',
              deptCode: '071001',
              columnName: '省局文件',
              status: 1
            },
            {
              deptName: '办公厅',
              columnScore: '2',
              children: [],
              columnId: '06321637387a4d7589c3c4c9310d1224',
              sortOrder: 2,
              pageSize: 0,
              zwSign: '1',
              pageNum: 0,
              parentId: 'dfdb576402fb4d3ba94d3f9a567f6b9f',
              deptCode: '071001',
              columnName: '地方文件',
              status: 1
            },
            {
              deptName: '办公厅',
              columnScore: '2',
              children: [],
              columnId: '1e3c70070b264abd876302ce263ebd67',
              sortOrder: 3,
              pageSize: 0,
              zwSign: '1',
              pageNum: 0,
              parentId: 'dfdb576402fb4d3ba94d3f9a567f6b9f',
              deptCode: '071001',
              columnName: '其他',
              status: 1
            }
          ],
          columnId: 'dfdb576402fb4d3ba94d3f9a567f6b9f',
          sortOrder: 7,
          pageSize: 0,
          zwSign: '1',
          pageNum: 0,
          parentId: '60b54e06b0384bc6956dcfbc8f13a8a9',
          deptCode: '071001',
          columnName: '文件参考',
          status: 1
        }
      ],

      compType: ''
    }
  },
  methods: {
    //   获取当前树信息
    handleNodeClick(data) {
      console.log(data)
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.columnId,
        label: node.columnName,
        children: node.children
      }
    }
  }
}
</script>
<style scoped lang='scss'>
</style>
